<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Server Orchestration Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        .server-card {
            transition: all 0.3s ease;
        }
        .server-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .status-running { background-color: #d4edda; }
        .status-error { background-color: #f8d7da; }
        .status-initializing { background-color: #fff3cd; }
        .status-stopped { background-color: #e2e3e5; }
        .dependency-line {
            stroke: #6c757d;
            stroke-width: 2;
            fill: none;
            marker-end: url(#arrowhead);
        }
        .server-node {
            fill: #0d6efd;
            stroke: #fff;
            stroke-width: 2;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="mt-4 mb-4">Server Orchestration Dashboard</h1>
            </div>
        </div>
        
        <!-- System Overview -->
        <div class="row">
            <div class="col-md-3">
                <div class="card text-center">
                    <div class="card-body">
                        <h5 class="card-title">Total Servers</h5>
                        <p class="card-text display-4" id="totalServers">5</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-success text-white">
                    <div class="card-body">
                        <h5 class="card-title">Running</h5>
                        <p class="card-text display-4" id="runningServers">0</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-danger text-white">
                    <div class="card-body">
                        <h5 class="card-title">Errors</h5>
                        <p class="card-text display-4" id="errorServers">0</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-info text-white">
                    <div class="card-body">
                        <h5 class="card-title">System Status</h5>
                        <p class="card-text" id="systemStatus">Initializing</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Server Status Cards -->
        <div class="row mt-4">
            <div class="col-12">
                <h2>Server Status</h2>
                <div class="row" id="serverCards">
                    <!-- Server cards will be inserted here by JavaScript -->
                </div>
            </div>
        </div>
        
        <!-- Dependency Graph -->
        <div class="row mt-4">
            <div class="col-12">
                <h2>Dependency Graph</h2>
                <div class="card">
                    <div class="card-body">
                        <pre id="dependencyGraph" class="bg-light p-3 rounded"></pre>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Startup Order -->
        <div class="row mt-4">
            <div class="col-md-6">
                <h2>Startup Order</h2>
                <div class="card">
                    <div class="card-body">
                        <ol id="startupOrder">
                            <!-- Startup order will be inserted here by JavaScript -->
                        </ol>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h2>Parallel Groups</h2>
                <div class="card">
                    <div class="card-body">
                        <div id="parallelGroups">
                            <!-- Parallel groups will be inserted here by JavaScript -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // Refresh data every 5 seconds
        function refreshData() {
            $.get("/api/system/overview", function(data) {
                $("#totalServers").text(data.totalServers);
                $("#runningServers").text(data.runningServers);
                $("#errorServers").text(data.errorServers);
                $("#systemStatus").text(data.allReady ? "Ready" : "Not Ready");
                
                if (data.allReady) {
                    $("#systemStatus").parent().removeClass("bg-warning").addClass("bg-success");
                } else {
                    $("#systemStatus").parent().removeClass("bg-success").addClass("bg-warning");
                }
            });
            
            $.get("/api/servers/status", function(data) {
                displayServerCards(data.servers);
            });
            
            $.get("/api/servers/dependencies", function(data) {
                $("#dependencyGraph").text(data.graph);
                displayStartupOrder(data.startupOrder);
                displayParallelGroups(data.parallelGroups);
            });
        }
        
        function displayServerCards(servers) {
            $("#serverCards").empty();
            
            for (const [name, state] of Object.entries(servers)) {
                let statusClass = "status-stopped";
                let statusIcon = "bi-stop-circle";
                let statusText = "Stopped";
                
                switch(state) {
                    case "RUNNING":
                    case "READY":
                    case "CONNECTED":
                        statusClass = "status-running";
                        statusIcon = "bi-check-circle-fill";
                        statusText = "Running";
                        break;
                    case "ERROR":
                    case "UNHEALTHY":
                        statusClass = "status-error";
                        statusIcon = "bi-x-circle-fill";
                        statusText = "Error";
                        break;
                    case "INITIALIZING":
                    case "STARTING":
                        statusClass = "status-initializing";
                        statusIcon = "bi-arrow-repeat";
                        statusText = "Starting";
                        break;
                }
                
                let serverCard = `
                    <div class="col-md-4 mb-3">
                        <div class="card server-card ${statusClass}">
                            <div class="card-body">
                                <h5 class="card-title">${name}</h5>
                                <p class="card-text">
                                    <i class="bi ${statusIcon}"></i> ${statusText}<br>
                                    <small>State: ${state}</small>
                                </p>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" style="width: ${(state === "RUNNING" || state === "READY" || state === "CONNECTED") ? 100 : 50}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                $("#serverCards").append(serverCard);
            }
        }
        
        function displayStartupOrder(startupOrder) {
            $("#startupOrder").empty();
            
            for (const server of startupOrder) {
                $("#startupOrder").append(`<li>${server.name} (Port: ${server.port})</li>`);
            }
        }
        
        function displayParallelGroups(parallelGroups) {
            $("#parallelGroups").empty();
            
            for (let i = 0; i < parallelGroups.length; i++) {
                let group = parallelGroups[i];
                let groupHtml = `
                    <div class="mb-3">
                        <h6>Group ${i + 1} (can start in parallel)</h6>
                        <div class="d-flex flex-wrap">
                `;
                
                for (const server of group) {
                    groupHtml += `<span class="badge bg-primary m-1">${server.name}</span>`;
                }
                
                groupHtml += `
                        </div>
                    </div>
                `;
                
                $("#parallelGroups").append(groupHtml);
            }
        }
        
        // Initial load
        refreshData();
        
        // Set up auto-refresh
        setInterval(refreshData, 5000);
    </script>
</body>
</html>